<template>
  <div class="label-container">
    <el-tooltip :content="props.content" placement="top" :visible="isShowTooltip" :effect="effect">
      <span  @mouseenter="handleMouseenter"  @mouseleave="mouseleave" class="label-content" >{{props.content}}</span>
    </el-tooltip>
  </div>
</template>
<script setup lang="ts" name='CustomTooltip'>
import { ref,defineProps } from 'vue';

const props = defineProps({
  content: {
    type: String,
    default: ''
  },
  width:{
    type:Number,
    default: 50
  },
  effect:{
    type:String,
    default:'light',
  }
})

const isShowTooltip = ref(false);

const handleMouseenter = (e) => {
  let number=e.fromElement.clientWidth
  isShowTooltip.value = e.target.offsetWidth -number< 0 ? false : true
}

const mouseleave = () => {
  isShowTooltip.value = false;
}
</script>
<style>
.label-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
